<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="ts" name="BarEcharts">
// import { ECOption } from "@/components/ECharts/config";
import ECharts from "@/components/ECharts/index.vue";
import { onMounted, reactive, watch } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: false,
    default: () => []
  },
  colorList: {
    type: Array,
    required: false,
    default: () => []
  }
});

watch(
  () => props.data,
  () => {
    setOption();
  }
);

const option: any = reactive({
  tooltip: {
    trigger: "item",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  // grid: {
  //   left: "13%",
  //   right: "4%",
  //   // top: "-10%",
  //   containLabel: true
  // },
  legend: {
    orient: "vertical", // 设置图例竖直排列
    right: "10%", // 图例距离容器右侧的距离为10像素
    top: "18%", // 图例距离容器顶部的距离为10像素
    // bottom: "30%", // 图例距离容器底部的距离为10像素
    // icon: "rect",
    // itemWidth: 26, // 设置图例图标的宽度
    // itemHeight: 16, // 设置图例图标的高度
    itemGap: 25 // 设置图例项之间的间距
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["80%", "90%"],
      center: ["30%", "50%"],
      // avoidLabelOverlap: false,
      data: [],
      itemStyle: {
        color: function (params) {
          // 通过 params 中的 dataIndex 来返回不同的颜色
          let colorList = ["#ffffff", "red"];
          console.log(colorList[params.dataIndex]);
          return colorList[params.dataIndex];
        }
      }
    },
    {
      name: "",
      type: "pie",
      radius: ["65%", "75%"],
      center: ["30%", "50%"],
      avoidLabelOverlap: false,
      data: []
    },
    {
      name: "",
      type: "pie",
      radius: ["50%", "60%"],
      center: ["30%", "50%"],
      avoidLabelOverlap: false,
      data: []
    },
    {
      name: "",
      type: "pie",
      radius: ["35%", "45%"],
      center: ["30%", "50%"],
      avoidLabelOverlap: false,
      data: []
    },
    {
      name: "",
      type: "pie",
      radius: ["35%", "90%"],
      center: ["30%", "50%"],
      avoidLabelOverlap: false,
      data: []
    }
  ]
});

const setOption = () => {
  const data: any = props.data || [];
  option.series = [];
  const max = 70;
  const bar = 8; // 宽度
  const padding = 4; // 间隔
  data.forEach((item, i) => {
    const end = max - (bar + padding) * i;
    const start = end - bar;
    const series = {
      name: item.name,
      type: "pie",
      radius: [start + "%", end + "%"],
      center: ["50%", "50%"],
      data: [item.use || 0, item.noUse || 0],
      itemStyle: {
        color: function (params) {
          let color = props.colorList && props.colorList.length && props.colorList[i] ? props.colorList[i] : "#1F8CF2FF";
          const colorList = [color, "transparent"];
          return colorList[params.dataIndex];
        }
      },
      labelLine: {
        show: false // 不显示引导线
      }
    };
    option.series.push(series);
  });
};

onMounted(() => {
  setOption();
});
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
}
</style>
